<template>
  <div id="changedialog">
    <commonformdialog
      :isshowDialogs="isshowDialog"
      :dialogTitle="dialogTitle"
      @closetextDialog="closetextDialog"
      @confirmbtn="confirmbtn"
      @rejected="rejected"
      :isshowFooter="false"
      :isshowFooterBh="isshowFooterBh"
    >
      <div class="innerLoding">
        <el-row>
          <el-form
            :model="formData"
            ref="ruleForm"
            label-width="120px"
            size="small"
          >
            <el-col :span="24">
              <h3 class="titleTips">
                审核信息：<span class="look">{{ formData.statusText }}</span>
              </h3>
            </el-col>
            <el-col :span="24">
              <el-form-item label="封面图:" prop="head_img">
                <el-image
                  style="width: 100px; height: 100px"
                  :src="formData.head_img"
                  :preview-src-list="[formData.head_img]"
                >
                </el-image>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="名称:" prop="title">
                <span>{{ formData.title }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="副标题:" prop="sub_title">
                <span>{{ formData.sub_title }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="标签:" prop="tab">
                <span>{{ formData.tab }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申领类型:" prop="apply_type">
                <span>{{ formData.apply_type }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班型类别:" prop="type">
                <span>{{ formData.type }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="付款方式:" prop="pay_type">
                <span>{{ formData.pay_type }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班型费用:" prop="cost">
                <span>{{ formData.cost }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="班型原价:" prop="price">
                <span>{{ formData.price }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="学车时间:" prop="study_time">
                <span>{{ formData.study_time }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="接送方式:" prop="pick_type">
                <span>{{ formData.pick_type }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科二人数:" prop="section_two">
                <span>{{ formData.section_two }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="科三人数:" prop="section_three">
                <span>{{ formData.section_three }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="节点:">
              
              </el-form-item>
            </el-col>
            <el-col :span="24">
               <el-table
                  class="tablearea"
                  :data="formData.node"
                  border
                  size="mini"
                  v-if="formData.node"
                >
                  <el-table-column
                    label="#"
                    type="index"
                    show-overflow-tooltip
                    width="50"
                    align="center"
                  ></el-table-column>
                  <el-table-column label="节点名称" align="center" width="180">
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="节点名称"
                        :disabled="isdisable"
                        v-if="scope.row.title"
                        v-model="scope.row.title"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="节点费用(元)"
                    align="center"
                    prop="cost"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="节点费用"
                        :disabled="isdisable"
                        v-model="scope.row.cost"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="建档"
                    align="center"
                    width="120px"
                    prop="is_record"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="是否建档"
                        :disabled="isdisable"
                        v-model="scope.row.is_record"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="科二练车(学时)"
                    align="center"
                    prop="class_hours_second"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="科二练车学时"
                        :disabled="isdisable"
                        v-model="scope.row.class_hours_second"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="科二模拟(次)"
                    align="center"
                    prop="simulation_second"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="科二模拟次数"
                        :disabled="isdisable"
                        v-model="scope.row.simulation_second"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="科二考试(次)"
                    align="center"
                    prop="exam_second"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="科二考试次数"
                        :disabled="isdisable"
                        v-model="scope.row.exam_second"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="科三练车(学时)"
                    align="center"
                    prop="class_hours_third"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="科三练车学时"
                        :disabled="isdisable"
                        v-model="scope.row.class_hours_third"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="科三模拟(次)"
                    align="center"
                    prop="simulation_third"
                  >
                    <template slot-scope="scope">
                      <!-- <span v-if="scope.row.show"> -->
                      <el-input
                        size="mini"
                        placeholder="科三模拟次数"
                        :disabled="isdisable"
                        v-model="scope.row.simulation_third"
                      ></el-input>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="科三考试(次)"
                    align="center"
                    prop="exam_third"
                  >
                    <template slot-scope="scope">
                      <el-input
                        size="mini"
                        placeholder="科三考试次数"
                        :disabled="isdisable"
                        v-model="scope.row.exam_third"
                      ></el-input>
                    </template>
                  </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="24">
              <el-form-item label="详情:">
                <div
                  class="textItem"
                  v-for="(i, index) in formData.details"
                  :key="index"
                >
                  <h3 v-if="index == 0">套餐介绍</h3>
                  <h3 v-if="index == 1">费用明细</h3>
                  <h3 v-if="index == 2">服务承诺</h3>
                  <p v-for="(p, pindex) in i" :key="pindex">
                    <span :class="p.title == 1 ? 'borderTitle' : ''">{{
                      p.text
                    }}</span>
                  </p>
                </div>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <toExamine
        :isshowDialogE="isshowDialogE"
        :status="status"
        :id="id"
        @closedialogE="closeDialogE"
        @confirmbtnE="confirmbtnE"
      ></toExamine>
    </commonformdialog>
  </div>
</template>

<script type="text/javascript">
//引入弹窗
import commonformdialog from "@/components/commondialog/commondialog";

import toExamine from "./toExamine";

export default {
  data() {
    return {
      formData: {},
      isshowFooterBh: false,
      isshowDialogE: false,
      isdisable: true,
      status: null,
      id: null,
      mapData: {},
    };
  },
  props: {
    //是否显示弹窗
    isshowDialog: {
      type: Boolean,
      default: false,
      required: true,
    },
    //表单的名字
    dialogTitle: {
      type: String,
      default: "",
      required: true,
    },
    //是编辑还是新增
    formType: {
      type: Number,
      default: 0,
    },
    dialogdata: {
      type: Object,
    },
  },
  components: {
    commonformdialog,
    toExamine,
  },
  methods: {
    closetextDialog() {
      this.$emit("closedialog");
    },
    //关闭审核弹框
    closeDialogE() {
      this.isshowDialogE = false;
    },
    //提交审核
    confirmbtnE() {
      this.isshowDialogE = false;
      //通知父级关闭弹框
      console.log("审核提交");
      this.$emit("confirm");
    },
    //驳回
    rejected() {
      this.status = 2;
      this.id = this.formData.id;
      this.isshowDialogE = true;
    },
    //通过
    confirmbtn() {
      this.status = 1;
      this.id = this.formData.id;
      this.isshowDialogE = true;
    },
  },
  watch: {
    isshowDialog: function (val) {
      if (!val) {
        this.$refs["ruleForm"].resetFields();
      }
    },
    dialogdata: function (val) {
      if (val) {
        this.$nextTick(() => {
          this.formData = val;
          if (this.formData.details) {
            this.formData.details = JSON.parse(this.formData.details);
          }

          console.log(this.formData.details);
        });
      }
    },
    formType: function (val) {
      if (val === 0) {
        this.isshowFooterBh = false;
      } else {
        this.isshowFooterBh = true;
      }
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>

.mapBox {
  position: relative;
  height: 500px;
}
.textItem {
  h3 {
    color: red;
    margin-bottom: 10px;
  }
  .borderTitle {
    font-weight: bold;
    font-size: 15px;
  }
}
</style>
